<template>
  <div id="links">
    <div class="LinksWrapper">
      <ListTitle :name="'标签墙'">
        <template v-slot:Header>
          <div class='pattern-header'>
            <h1>友链</h1>
          </div>
        </template>
      </ListTitle>
      <div class="MainWrapper MainWrapper-flex">
        <div class='flex-items'>
          <div class='links cell' v-if="isShowLinks">
            <div class='extra'>
              <div class='item'>
                <ul class='link-items'>
                  <li class='link-item post-list-show' v-for="item in links">
                    <a :href='item.url'>
                      <img :src='item.icon' alt=""/>
                      <span class="sitename">{{ item.name }}</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <p v-else class="noLinks">去找点新朋友玩吧...</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less" src="./style/links.less"></style>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {pageFriendLink} from '/@/api/friend-link'
import ListTitle from '/@/components/listTitle/ListTitle.vue'

const currentPage = ref(1)
const sizes = ref(999)
const links = reactive([])
const isShowLinks = ref(false)
onMounted(() => getFriendLink())
const getFriendLink = () => {
  const params = {
    current: currentPage.value,
    size: sizes.value
  }
  pageFriendLink(params).then(res => {
    res.data.records.forEach((i, t) => links.push(i))
    links.length > 0 ? isShowLinks.value = true : isShowLinks.value = false
  })
}
</script>